import { useEffect } from "react";

export default function useDaPing(ref) {
    useEffect(() => {
        // 定义缩放函数，每次窗口变化时调用
        function setScale() {
            const baseWidth = 1920; // 设计稿宽度(px)
            const baseHeight = 1080; // 设计稿高度(px)
            const scaleX = window.innerWidth / baseWidth; // 横向缩放比例
            const scaleY = window.innerHeight / baseHeight; // 纵向缩放比例
            const scale = Math.min(scaleX, scaleY); // 取较小的比例，保证内容全部可见且等比例缩放 // 设置transform缩放和居中定位
            if (ref.current) {
                // 判断ref已绑定到DOM
                ref.current.style.transform = `scale(${scale})`; // 设置缩放 // 计算内容区居中时的left/top偏移
                ref.current.style.left = `${(window.innerWidth - baseWidth * scale) / 2
                    }px`; // 居中水平偏移
                ref.current.style.top = `${(window.innerHeight - baseHeight * scale) / 2
                    }px`; // 居中垂直偏移
            }
        }
        setScale(); // 首次渲染时立即缩放一次
        window.addEventListener("resize", setScale); // 监听窗口变化，实时缩放 // 组件卸载时移除监听，防止内存泄漏
        return () => window.removeEventListener("resize", setScale);
    }, [ref]); // 依赖ref变化
}
